<template>
	<view class="container">
		<uni-icons type="back" size="30" @click="back"></uni-icons>
		<view class="top">
			<text class="title">登录</text>
		</view>

		<view class="input">
			<uni-easyinput v-model="userinfo.name" placeholder="请输入用户名" :styles="styles[0]" @focus="come(0)"
				@blur="leave(0)" class="input-item" @input="add1" />
			<uni-easyinput v-model="userinfo.password" placeholder="请输入密码" type="password" :styles="styles[1]"
				@focus="come(1)" @blur="leave(1)" class="input-item" @input="add2" />
		</view>

		<text class="nav" @click="toRegister">没有账号？点击注册</text>

		<view class="bottom">
			<checkbox-group @change="checkboxChange">
				<label class="cb">
					<checkbox :checked="cb" style="transform:scale(0.7)" />
					<text>您已阅读并同意<text class="detail">用户协议</text>和<text class="detail">隐私政策</text></text>
				</label>
			</checkbox-group>
			<button @click="login">点击登录</button>
		</view>

		<view>
			<uni-popup :ref="message" type="message">
				<uni-popup-message type="error" :message="messageText" :duration="2000"></uni-popup-message>
			</uni-popup>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'

	function add1(e) {
		userinfo.name = e
	}

	function add2(e) {
		userinfo.password = e
	}
	const cb = ref(false)

	const userinfo = reactive({
		name: '',
		password: ''
	})

	const message = ref('message')
	const messageText = ref('')

	function checkboxChange() {
		cb.value = !cb.value
	}

	function back() {
		uni.navigateBack();
	}

	function toRegister() {
		uni.navigateTo({
			url: '/pages/register/register'
		});
	}

	const styles = reactive([{
		borderColor: ''
	}, {
		borderColor: ''
	}])

	function come(index) {
		styles[index].borderColor = '#000'
	}

	function leave(index) {
		styles[index].borderColor = ''
	}

	function login() {
		if (userinfo.name == '' || userinfo.password == '') {
			messageText.value = '请输入用户名或密码'
			message.value.open()
		} else {
			if (!cb.value) {
				messageText.value = '请勾选用户协议和隐私政策'
				message.value.open()
			} else {
				uni.request({
					url: 'http://localhost:8080/login',
					method: 'POST',
					data: {
						name: userinfo.name,
						password: userinfo.password
					},
					success: res => {
						const userData = res.data.data;
						uni.setStorageSync('userInfo', userData);
						uni.showToast({
							title: '登录成功',
							icon: 'none',
							duration: 2000
						});
						uni.switchTab({
							url: '/pages/my/my'
						})
					},
					fail: () => {
						messageText.value = '用户不存在'
						message.value.open()
					},
					complete: () => {}
				});
			}
		}
	}
</script>

<style>
	.container {
		padding: 10% 5% 10% 5%;
		position: relative;
	}

	.top {
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 50rpx;
		font-weight: bold;
	}

	.input {
		margin: 10% 4% 5% 0;
	}

	.input-item {
		padding: 10rpx;
		margin-top: 5%;
		border: 3rpx solid #000;
		border-radius: 10rpx;
	}

	.nav {
		margin-bottom: 20%;
		font-size: 28rpx;
		display: inline-block;
	}

	.nav:hover {
		color: #D2E9FF;
	}

	.cb {
		font-size: 28rpx;
	}

	button {
		background-color: #000;
		color: #fff;
		border: none;
		padding: 15rpx 30rpx;
		border-radius: 12rpx;
		font-size: 30rpx;
	}

	.cb text {
		color: #000;
		text-decoration: underline;
	}

	.detail {
		font-weight: bold;
	}
</style>